import { FC } from 'react';

// 遮罩层
export const Masker: FC<{ result: RESULTTYPE | null }> = (props) => {
  const { result } = props;
  return (
    <div className='bg-maskerbg absolute z-40 top-[34px] right-0 bottom-0 left-0'>
      <div className='flex h-full items-center justify-center'>
        {/* 测试结果 */}
        {result &&
          result.pass !== undefined &&
          result.total !== undefined &&
          result.pass < result.total && (
            <>
              <img
                className='w-[55px] h-[55px] mr-[12px]'
                src={
                  new URL('@/assets/imgs/icon-result.png', import.meta.url).href
                }
                alt=''
              />
              <div>
                <div className='text-white text-[14px]'>要继续加油哦！</div>
                <div className='text-white text-[14px]'>
                  你提交的代码通过了 {result.pass}/{result.total} 个测试示例
                </div>
              </div>
            </>
          )}
        {/* 提交成功 */}
        {/* 成功, 尚未出结果 */}
        {result &&
          result.id !== undefined &&
          result.total === undefined &&
          result.pass === undefined && (
            <>
              <img
                className='w-[55px] h-[55px] mr-[12px]'
                src={
                  new URL('@/assets/imgs/icon-success.png', import.meta.url)
                    .href
                }
                alt=''
              />
              <div>
                <div className='text-white text-[14px] font-medium'>
                  提交成功
                </div>
                <div className='text-white text-[14px] font-normal'>
                  代码提交成功，系统正在判定结果...
                </div>
              </div>
            </>
          )}
        {/* 提交失败 */}
        {result && result.id === undefined && (
          <>
            <img
              className='w-[55px] h-[55px] mr-[12px]'
              src={new URL('@/assets/imgs/icon-fail.png', import.meta.url).href}
              alt=''
            />
            <div className='text-white text-[14px] font-medium'>提交失败</div>
          </>
        )}
        {/* 编译失败 */}
        {result && result.id !== undefined && result.total === 0 && (
          <>
            <img
              className='w-[55px] h-[55px] mr-[12px]'
              src={new URL('@/assets/imgs/icon-fail.png', import.meta.url).href}
              alt=''
            />
            <div className='text-white text-[14px] font-medium'>
              你提交的代码编译错误，请仔细检查
            </div>
          </>
        )}
      </div>
    </div>
  );
};
